<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <title>题目管理</title>
    <style>
       body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 苹果系统字体 */
    }
    .content {
        padding: 20px;
    }
       .pagination {
           display: flex;
           justify-content: center; /* 居中对齐 */
           padding: 10px 0; /* 上下内边距 */
           list-style: none; /* 移除默认列表样式 */
       }

       .pagination li {
           margin: 0 5px; /* 每个分页项之间的间距 */
       }

       .pagination a, .pagination span {
           display: inline-block;
           padding: 8px 12px; /* 内边距 */
           border: 1px solid #007bff; /* 边框颜色 */
           border-radius: 4px; /* 圆角 */
           color: #007bff; /* 链接颜色 */
           text-decoration: none; /* 移除下划线 */
           transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
       }

       .pagination a:hover {
           background-color: #007bff; /* 悬停时背景颜色 */
           color: #ffffff; /* 悬停时字体颜色 */
       }

       .pagination .active span {
           background-color: #007bff; /* 当前页的背景颜色 */
           color: #ffffff; /* 当前页的字体颜色 */
           border: 1px solid #007bff; /* 边框颜色 */
       }

       .pagination .disabled span {
           color: #6c757d; /* 禁用状态的字体颜色 */
           border: 1px solid #6c757d; /* 禁用状态的边框颜色 */
           cursor: not-allowed; /* 禁用状态的光标样式 */
       }
    </style>
</head>
<body>
    <div class="content">
        <h2>报告下载</h2>
        <div class="form-row mb-1">
        </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th width="22">编码</th>
                    <th width="60">版本</th>
                    <th width="100">人格类型</th>
                    <th width="120">测试时间</th>
                    <th width="80">支付</th>
                    <th width="100">支付渠道</th>
                    <th width="120">支付时间</th>
                    <th width="180">支付商家订单号</th>
                    <th>测评IP</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="questionTableBody">
            {volist name="$list" id="vo"}
                <tr>
                    <td>{$vo.order_no}</td>
                    <td>{$vo.version}</td>
                    <td>{$vo.result_type}</td>
                    <td>{$vo.test_date}</td>
                    <td>{$vo.detail.is_pay ? ($vo.detail.is_pay == 0 ?'否':'是'): ''}</td>
                    <td>{$vo.detail.is_pay ? ($vo.detail.pay_type == 'alipay' ?'支付宝':'微信'): ''}</td>
                    <td>{$vo.detail.pay_time ??''}</td>
                    <td>{$vo.detail.order_no ??''}</td>
                    <td>{$vo.ip}{$vo.ip|getIp}</td>
                    <td>
<!--                        <button class="btn btn-danger btn-sm" onclick="openEditModal(this,'{$vo.id}')">修改密码</button>-->
                        <a class="btn btn-primary btn-sm" target="_blank" href="/report?order_no={$vo.order_no}&secret={$vo.secret}">打开报告</a>
                    </td>
                </tr>

            {/volist}
            </tbody>
        </table>
        <nav>
            <ul class="pagination">
                {$list|raw}
                <b style="margin-top: 20px;margin-left: 10px;">总数：{$list->total()}</b>
            </ul>
        </nav>
    </div>
</body>

<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
    // 打开编辑模态框
    function openEditModal(button, id) {
        const row = button.closest('tr');
        const password = row.cells[2].innerText;
        document.getElementById('editTitle').value = password;
        console.log(password)
        // 保存当前行
        document.getElementById('editNewsForm').onsubmit = function(event) {
            event.preventDefault();
            row.cells[2].innerText = document.getElementById('editTitle').value;
            // 使用 jQuery 发送请求到后端以更新数据
            $.ajax({
                // 请求的 URL
                url: '/admins/reports/edit', // 替换为你的后端 API 路径
                // 请求方法
                data: {
                    id: id, // 发送旧标题以便后端识别
                    password:row.cells[2].innerText,
                },
                type:"Post",
                // 请求成功时的回调函数
                success: function (response) {
                    $('#result').html(`<p>标题: ${response.title}</p><p>内容: ${response.body}</p>`);
                },
                // 请求失败时的回调函数
                error: function (error) {
                    $('#result').html(`<p>请求出错: ${error.statusText}</p>`);
                }
            });
            $('#editNewsModal').modal('hide');
            // 显示保存成功模态框
            $('#successModal').modal('show');
        };
        $('#editNewsModal').modal('show');
    }
</script>
</html>